<template>
  <el-card shadow="never">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      label-width="68px"
      style="display: flex"
    >
      <el-form-item prop="type">
        <el-select
          v-model="queryParams.type"
          style="width: 100px"
          @change="handleChangeType"
        >
          <el-option
            v-for="item in typeList"
            :key="item.type"
            :label="item.name"
            :value="item.type"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="range">
        <el-date-picker
          v-if="queryParams.type === 1"
          v-model="queryParams.range"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 320px"
          @change="handleChangeDate"
          value-format="YYYY-MM-DD"
          :disabled-date="disabledDate"
        />
        <el-date-picker
          v-else-if="queryParams.type === 2"
          v-model="queryParams.range"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          style="width: 320px"
          @change="handleChangeMonth"
          value-format="YYYY-MM"
          :disabled-date="disabledDate"
        />
      </el-form-item>
      <div style="position: absolute; right: 50px">
        <el-form-item prop="condition">
          <el-select
            v-model="queryParams.condition"
            style="width: 100px"
            @change="handleChangeCondition"
            placeholder="高级筛选"
            clearable
          >
            <el-option
              v-for="item in conditionList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="saler" v-if="queryParams.condition === 'saler'">
          <el-select
            v-model="queryParams.saler"
            style="width: 300px"
            placeholder="请选择销售人员"
            clearable
            @change="handleChange"
          >
            <el-option
              v-for="item in followPeopleList"
              :key="item.id"
              :label="item.nickName"
              :value="item.id"
            >
              {{ item.nickName }}{{ !item.isJob ? "(已离职)" : "" }}
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          prop="joinway"
          v-else-if="queryParams.condition === 'joinway'"
        >
          <el-select
            v-model="queryParams.joinway"
            placeholder="请选择招生渠道"
            style="width: 300px"
            clearable
            @change="handleChange"
          >
            <el-option
              v-for="item in joinWayList"
              :key="item.dictCode"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          prop="creator"
          v-else-if="queryParams.condition === 'creator'"
        >
          <el-select
            v-model="queryParams.creator"
            style="width: 300px"
            placeholder="请选择学员创建人"
            @change="handleChange"
          >
            <el-option
              v-for="item in creatorList"
              :key="item.id"
              :label="item.nickName"
              :value="item.id"
            >
              {{ item.nickName }}{{ !item.isJob ? "(已离职)" : "" }}
            </el-option>
          </el-select>
        </el-form-item>
      </div>
    </el-form>
  </el-card>
  <el-card shadow="never">
    <span style="font-size: 16px; font-weight: bold">核心数据</span>
    <el-tooltip
      class="box-item"
      effect="dark"
      :content="
        queryParams.type === 1
          ? '日同比：（当天-上周的当天）/上周的当天*100%；日环比：（当天-昨天）/昨天*100%'
          : '月同比：（当月-去年的当月）/去年的当月*100%；月环比：（当月-上月）/上月*100%'
      "
      placement="right-start"
    >
      <span
        style="color: rgb(183, 183, 183); margin-left: 10px; cursor: pointer"
      >
        <el-icon><InfoFilled /></el-icon>
        <span style="margin-left: 3px; color: #666; font-size: 14px"
          >什么是同环比?
        </span>
      </span>
    </el-tooltip>
    <div class="block-group">
      <CoreData
        title="累计线索数"
        :crData="coreData.totalNum"
        :hbData="coreData.totalNumDay"
        :tbData="coreData.totalNumWeek"
        :type="queryParams.type"
        linkTo="/salesCenter/clueManagement"
        tips="所选时间段最后一刻的线索数（潜在学员）"
        appendClass="first"
      />
      <CoreData
        title="新增线索数"
        :crData="coreData.newNum"
        :hbData="coreData.newNumDay"
        :tbData="coreData.newNumWeek"
        :type="queryParams.type"
        linkTo="/salesCenter/clueManagement"
        tips="创建时间在所选时间范围内的全部线索/学员数"
      />
      <CoreData
        title="预约试听数"
        :crData="coreData.bookNum"
        :hbData="coreData.bookNumDay"
        :tbData="coreData.bookNumWeek"
        :type="queryParams.type"
        linkTo="/salesCenter/trailList"
        tips="试听时间在所选时间范围内的试听记录数"
      />
      <CoreData
        title="试听完成数"
        :crData="coreData.finishNum"
        :hbData="coreData.finishNumDay"
        :tbData="coreData.finishNumWeek"
        :type="queryParams.type"
        linkTo="/salesCenter/trailList"
        tips="试听时间在所选时间范围内，试听状态为'已体验'的试听记录数"
      />
      <CoreData
        title="试听完成率"
        :crData="coreData.completionRate"
        :hbData="coreData.completionRateDay"
        :tbData="coreData.completionRateWeek"
        :type="queryParams.type"
        tips="试听完成数/预约试听数*100%"
      /><CoreData
        title="试听报名数"
        :crData="coreData.applicationNum"
        :hbData="coreData.applicationNumDay"
        :tbData="coreData.applicationNumWeek"
        :type="queryParams.type"
        linkTo="/salesCenter/trailList"
        tips="试听时间在所选时间范围内，是否报名为'是',试听状态为'已体验'的试听记录数"
      /><CoreData
        title="试听转化率"
        :crData="coreData.conversionRate"
        :hbData="coreData.conversionRateDay"
        :tbData="coreData.conversionRateWeek"
        :type="queryParams.type"
        tips="试听报名数/试听完成数*100%，如果大于100%，检查一下是否有试听课未点名"
      />
      <CoreData
        title="报课人次"
        :crData="coreData.registraNum"
        :hbData="coreData.registraNumDay"
        :tbData="coreData.registraNumWeek"
        :type="queryParams.type"
        linkTo="/financial/orderList"
        tips="所选日期内，购买课程的学员人次。同一学员购买多课程记多次"
      />
      <CoreData
        title="报课实收金额"
        :crData="coreData.paidAmount"
        :hbData="coreData.paidAmountDay"
        :tbData="coreData.paidAmountWeek"
        :type="queryParams.type"
        linkTo="/financial/orderList"
        tips="所选日期内，学员购买课程的实付金额之和"
        appendClass="last"
      />
    </div>
  </el-card>
  <el-card shadow="never">
    <span style="font-size: 16px; font-weight: bold">数据趋势</span>
    <el-form :inline="true" label-width="100px" style="display: flex">
      <el-radio-group v-model="radio1" @change="handleRadioChange">
        <el-row>
          <el-col :span="24">
            <el-form-item label="线索概况：">
              <!-- <el-radio value="totalNumList">累计线索数</el-radio> -->
              <el-radio value="newNumList">新增线索数</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="试听情况：">
              <el-radio value="bookNumList">预约试听数</el-radio>
              <el-radio value="finishNumList">试听完成数</el-radio>
              <el-radio value="completionRateList">试听完成率</el-radio>
              <el-radio value="applicationNumList">试听报名数</el-radio>
              <el-radio value="conversionRateList">试听转化率</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="签约情况：">
              <el-radio value="registraNumList">报课人次</el-radio>
              <el-radio value="paidAmountNumList">报课实收金额</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
      </el-radio-group>
    </el-form>
    <div ref="chartContainer" style="width: 100%; height: 300px"></div>
  </el-card>
  <el-card shadow="never">
    <div style="font-size: 16px; font-weight: bold">数据明细</div>
    <el-radio-group
      v-model="tab"
      @change="handleChangeTab"
      style="margin-top: 10px"
    >
      <!-- <el-radio-button :value="1">销售人员排行</el-radio-button> -->
      <el-radio-button :value="2">学员创建人排行</el-radio-button>
      <el-radio-button :value="3">上课老师排行</el-radio-button>
      <!-- <el-radio-button :value="4">招生渠道排行</el-radio-button> -->
      <el-radio-button :value="5">趋势明细</el-radio-button>
    </el-radio-group>
    <div v-if="tab === 1">
      <el-row :gutter="10" class="query-box">
        <el-col :span="22.5">
          <el-form
            :model="tableParams"
            ref="queryRef"
            :inline="true"
            label-width="68px"
            style="display: flex"
          >
            <el-form-item
              prop="saler"
              label="销售人员"
              v-if="queryParams.condition !== 'saler'"
            >
              <el-select
                v-model="tableParams.saler"
                style="width: 240px"
                placeholder="请选择销售人员"
                @change="queryInitList"
                clearable
              >
                <el-option
                  v-for="item in followPeopleList"
                  :key="item.id"
                  :label="item.nickName"
                  :value="item.id"
                >
                  {{ item.nickName }}{{ !item.isJob ? "(已离职)" : "" }}
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否授课" prop="isTeacher">
              <el-switch
                v-model="tableParams.isTeacher"
                :active-value="1"
                :inactive-value="0"
                @change="queryInitList"
                clearable
              ></el-switch>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="plain"
            plain
            icon="Download"
            @click="handleExport(1, '销售人员排行表')"
          >
            导出
          </el-button>
        </el-col>
      </el-row>
      <el-table v-loading="tableLoading" :data="list" border>
        <el-table-column
          min-width="100"
          align="center"
          label="序号"
          prop="index"
          fixed="left"
        >
          <template #default="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="销售人员"
          prop="peopleName"
          fixed="left"
          xxx
          min-width="120"
        />
        <el-table-column
          label="当前状态"
          prop="isJob"
          fixed="left"
          xxx
          min-width="120"
        />
        <el-table-column
          label="是否授课"
          prop="isTeacher"
          fixed="left"
          xxx
          min-width="120"
        />
        <!-- <el-table-column prop="totalNum" xxx min-width="140">
          <template #header>
            累计线索数
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段最后一刻的线索数（潜在学员）"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column> -->
        <el-table-column prop="newNum" xxx min-width="160">
          <template #header>
            新增线索数
            <el-tooltip
              class="box-item"
              effect="dark"
              content="创建时间在所选时间范围内的全部线索/学员数"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="bookNum" xxx min-width="160">
          <template #header>
            预约试听数
            <el-tooltip
              class="box-item"
              effect="dark"
              content="试听时间在所选时间范围内的试听记录数"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="finishNum" xxx min-width="160">
          <template #header>
            试听完成数
            <el-tooltip
              class="box-item"
              effect="dark"
              content="试听时间在所选时间范围内，试听状态为“已体验”的试听记录数"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="completionRate" xxx min-width="160">
          <template #header>
            试听完成率
            <el-tooltip
              class="box-item"
              effect="dark"
              content="试听完成数/预约试听数*100%"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="applicationNum" xxx min-width="140">
          <template #header>
            试听报名数
            <el-tooltip
              class="box-item"
              effect="dark"
              content="试听时间在所选时间范围内，是否报名为“是”，试听状态为“已体验”的试听记录数"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="conversionRate" xxx min-width="160">
          <template #header>
            试听转化率
            <el-tooltip
              class="box-item"
              effect="dark"
              content="试听报名数/试听完成数*100%，如果大于100%，检查一下是否有试听课未点名哦"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="registraNum" xxx min-width="120">
          <template #header>
            报课人次
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选日期内，购买课程的学员人次。同一学员购买多课程记多次"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="salePerformance" xxx min-width="120">
          <template #header>
            销售业绩
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间范围内，订单的销售业绩金额之和"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="paidAmount" xxx min-width="160">
          <template #header>
            报课实收金额
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选日期内，学员购买课程的实付金额之和"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="tableParams.pageNum"
        v-model:limit="tableParams.pageSize"
        @pagination="getList"
        size="small"
      />
    </div>
    <div v-else-if="tab === 2">
      <el-row :gutter="10" class="query-box">
        <el-col :span="22.5">
          <!--<el-form-->
            <!--:model="tableParams"-->
            <!--ref="queryRef"-->
            <!--:inline="true"-->
            <!--label-width="68px"-->
            <!--style="display: flex"-->
          <!--&gt;-->
            <!--<el-form-item-->
              <!--prop="creator"-->
              <!--label="学员创建人"-->
              <!--v-if="queryParams.condition !== 'creator'"-->
            <!--&gt;-->
              <!--<el-select-->
                <!--v-model="tableParams.creator"-->
                <!--style="width: 240px"-->
                <!--placeholder="请选择学员创建人"-->
                <!--@change="queryInitList"-->
                <!--clearable-->
              <!--&gt;-->
                <!--<el-option-->
                  <!--v-for="item in creatorList"-->
                  <!--:key="item.id"-->
                  <!--:label="item.nickName"-->
                  <!--:value="item.id"-->
                <!--&gt;-->
                  <!--{{ item.nickName }}{{ !item.isJob ? "(已离职)" : "" }}-->
                <!--</el-option>-->
              <!--</el-select>-->
            <!--</el-form-item>-->
            <!--<el-form-item label="是否授课" prop="isTeacher">-->
              <!--<el-switch-->
                <!--v-model="tableParams.isTeacher"-->
                <!--:active-value="1"-->
                <!--:inactive-value="0"-->
                <!--@change="queryInitList"-->
                <!--clearable-->
              <!--&gt;</el-switch>-->
            <!--</el-form-item>-->
          <!--</el-form>-->
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="plain"
            plain
            icon="Download"
            @click="handleExport(2, '学员创建人排行表')"
          >
            导出
          </el-button>
        </el-col>
      </el-row>
      <el-table v-loading="tableLoading" :data="list" border>
        <el-table-column
          min-width="100"
          align="center"
          label="序号"
          prop="index"
          fixed="left"
        >
          <template #default="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="学员创建人"
          prop="peopleName"
          fixed="left"
          xxx
          min-width="140"
        />
        <el-table-column
          label="当前状态"
          prop="isJob"
          fixed="left"
          xxx
          min-width="120"
        />
        <el-table-column
          label="是否授课"
          prop="isTeacher"
          fixed="left"
          xxx
          min-width="120"
        />
        <!-- <el-table-column prop="totalNum" xxx min-width="140">
          <template #header>
            累计线索数
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段最后一刻的线索数（潜在学员）"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column> -->
        <el-table-column prop="newNum" xxx min-width="160">
          <template #header>
            新增线索数
            <el-tooltip
              class="box-item"
              effect="dark"
              content="创建时间在所选时间范围内的全部线索/学员数"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="bookNum" xxx min-width="160">
          <template #header>
            预约试听数
            <el-tooltip
              class="box-item"
              effect="dark"
              content="试听时间在所选时间范围内的试听记录数"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="finishNum" xxx min-width="160">
          <template #header>
            试听完成数
            <el-tooltip
              class="box-item"
              effect="dark"
              content="试听时间在所选时间范围内，试听状态为“已体验”的试听记录数"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="completionRate" xxx min-width="160">
          <template #header>
            试听完成率
            <el-tooltip
              class="box-item"
              effect="dark"
              content="试听完成数/预约试听数*100%"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="applicationNum" xxx min-width="140">
          <template #header>
            试听报名数
            <el-tooltip
              class="box-item"
              effect="dark"
              content="试听时间在所选时间范围内，是否报名为“是”，试听状态为“已体验”的试听记录数"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="conversionRate" xxx min-width="160">
          <template #header>
            试听转化率
            <el-tooltip
              class="box-item"
              effect="dark"
              content="试听报名数/试听完成数*100%，如果大于100%，检查一下是否有试听课未点名哦"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="registraNum" xxx min-width="120">
          <template #header>
            报课人次
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选日期内，购买课程的学员人次。同一学员购买多课程记多次"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="salePerformance" xxx min-width="180">
          <template #header>
            销售业绩
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间范围内，订单的销售业绩金额之和"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="paidAmount" xxx min-width="160">
          <template #header>
            报课实收金额
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选日期内，学员购买课程的实付金额之和"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="tableParams.pageNum"
        v-model:limit="tableParams.pageSize"
        @pagination="getList"
        size="small"
      />
    </div>
    <div v-else-if="tab === 3">
      <el-row :gutter="10" class="query-box">
        <el-col :span="22.5">
          <el-form
            :model="tableParams"
            ref="queryRef"
            :inline="true"
            label-width="68px"
            style="display: flex"
          >
            <!--<el-form-item prop="teacher" label="上课老师">-->
              <!--<el-select-->
                <!--v-model="tableParams.teacher"-->
                <!--style="width: 240px"-->
                <!--placeholder="请选择老师"-->
                <!--@change="queryInitList"-->
                <!--clearable-->
              <!--&gt;-->
                <!--<el-option-->
                  <!--v-for="item in teacherList"-->
                  <!--:key="item.value"-->
                  <!--:label="-->
                    <!--!item.isJob-->
                      <!--? item.label + '(已离职)'-->
                      <!--: !item.isTeacher-->
                      <!--? item.label + '(非授课)'-->
                      <!--: item.label-->
                  <!--"-->
                  <!--:value="item.value"-->
                <!--/>-->
              <!--</el-select>-->
            <!--</el-form-item>-->
          </el-form>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="plain"
            plain
            icon="Download"
            @click="handleExport(3, '上课老师排行表')"
          >
            导出
          </el-button>
        </el-col>
      </el-row>
      <el-table v-loading="tableLoading" :data="list" border>
        <el-table-column
          min-width="100"
          align="center"
          label="序号"
          prop="index"
          fixed="left"
        >
          <template #default="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="上课老师"
          prop="peopleName"
          fixed="left"
          xxx
          min-width="140"
        />
        <el-table-column
          label="当前状态"
          prop="isJob"
          fixed="left"
          xxx
          min-width="120"
        />

        <el-table-column prop="bookNum" xxx min-width="160">
          <template #header>
            预约试听数
            <el-tooltip
              class="box-item"
              effect="dark"
              content="试听时间在所选时间范围内的试听记录数"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="finishNum" xxx min-width="160">
          <template #header>
            试听完成数
            <el-tooltip
              class="box-item"
              effect="dark"
              content="试听时间在所选时间范围内，试听状态为“已体验”的试听记录数"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="completionRate" xxx min-width="160">
          <template #header>
            试听完成率
            <el-tooltip
              class="box-item"
              effect="dark"
              content="试听完成数/预约试听数*100%"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="applicationNum" xxx min-width="140">
          <template #header>
            试听报名数
            <el-tooltip
              class="box-item"
              effect="dark"
              content="试听时间在所选时间范围内，是否报名为“是”，试听状态为“已体验”的试听记录数"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="conversionRate" xxx min-width="160">
          <template #header>
            试听转化率
            <el-tooltip
              class="box-item"
              effect="dark"
              content="试听报名数/试听完成数*100%，如果大于100%，检查一下是否有试听课未点名哦"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="tableParams.pageNum"
        v-model:limit="tableParams.pageSize"
        @pagination="getList"
        size="small"
      />
    </div>
    <div v-else-if="tab === 4">
      <el-row :gutter="10" class="query-box">
        <el-col :span="22.5">
          <el-form
            :model="tableParams"
            ref="queryRef"
            :inline="true"
            label-width="68px"
            style="display: flex"
          >
            <el-form-item
              prop="joinway"
              label=""
              v-if="queryParams.condition !== 'joinway'"
            >
              <el-select
                v-model="tableParams.joinway"
                style="width: 240px"
                placeholder="请选择招生渠道"
                @change="queryInitList"
                clearable
              >
                <el-option
                  v-for="item in joinWayList"
                  :key="item.dictCode"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="plain"
            plain
            icon="Download"
            @click="handleExport(4, '招生渠道排行表')"
          >
            导出
          </el-button>
        </el-col>
      </el-row>
      <el-table v-loading="tableLoading" :data="list" border>
        <el-table-column
          min-width="100"
          align="center"
          label="序号"
          prop="index"
          fixed="left"
        >
          <template #default="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="招生渠道"
          prop="sourceName"
          fixed="left"
          xxx
          min-width="120"
        />

        <!-- <el-table-column prop="totalNum" xxx min-width="140">
          <template #header>
            累计线索数
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段最后一刻的线索数（潜在学员）"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column> -->
        <el-table-column prop="newNum" xxx min-width="160">
          <template #header>
            新增线索数
            <el-tooltip
              class="box-item"
              effect="dark"
              content="创建时间在所选时间范围内的全部线索/学员数"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="bookNum" xxx min-width="160">
          <template #header>
            预约试听数
            <el-tooltip
              class="box-item"
              effect="dark"
              content="试听时间在所选时间范围内的试听记录数"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="finishNum" xxx min-width="160">
          <template #header>
            试听完成数
            <el-tooltip
              class="box-item"
              effect="dark"
              content="试听时间在所选时间范围内，试听状态为“已体验”的试听记录数"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="completionRate" xxx min-width="160">
          <template #header>
            试听完成率
            <el-tooltip
              class="box-item"
              effect="dark"
              content="试听完成数/预约试听数*100%"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="applicationNum" xxx min-width="140">
          <template #header>
            试听报名数
            <el-tooltip
              class="box-item"
              effect="dark"
              content="试听时间在所选时间范围内，是否报名为“是”，试听状态为“已体验”的试听记录数"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="conversionRate" xxx min-width="160">
          <template #header>
            试听转化率
            <el-tooltip
              class="box-item"
              effect="dark"
              content="试听报名数/试听完成数*100%，如果大于100%，检查一下是否有试听课未点名哦"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="registraNum" xxx min-width="120">
          <template #header>
            报课人次
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选日期内，购买课程的学员人次。同一学员购买多课程记多次"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="salePerformance" xxx min-width="180">
          <template #header>
            销售业绩
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间范围内，订单的销售业绩金额之和"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="paidAmount" xxx min-width="160">
          <template #header>
            报课实收金额
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选日期内，学员购买课程的实付金额之和"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="tableParams.pageNum"
        v-model:limit="tableParams.pageSize"
        @pagination="getList"
        size="small"
      />
    </div>
    <div v-else-if="tab === 5">
      <el-row :gutter="10" class="query-box">
        <el-col :span="22.5"> </el-col>
        <el-col :span="1.5">
          <el-button
            type="plain"
            plain
            icon="Download"
            @click="handleExport(5, '趋势明细表')"
          >
            导出
          </el-button>
        </el-col>
      </el-row>
      <el-table v-loading="tableLoading" :data="list" border>
        <el-table-column
          min-width="100"
          align="center"
          label="序号"
          prop="index"
          fixed="left"
        >
          <template #default="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="日期"
          prop="addTime"
          fixed="left"
          xxx
          min-width="120"
        />
        <!-- <el-table-column prop="totalNum" xxx min-width="140">
          <template #header>
            累计线索数
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段最后一刻的线索数（潜在学员）"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column> -->
        <el-table-column prop="newNum" xxx min-width="160">
          <template #header>
            新增线索数
            <el-tooltip
              class="box-item"
              effect="dark"
              content="创建时间在所选时间范围内的全部线索/学员数"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="bookNum" xxx min-width="160">
          <template #header>
            预约试听数
            <el-tooltip
              class="box-item"
              effect="dark"
              content="试听时间在所选时间范围内的试听记录数"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="finishNum" xxx min-width="160">
          <template #header>
            试听完成数
            <el-tooltip
              class="box-item"
              effect="dark"
              content="试听时间在所选时间范围内，试听状态为“已体验”的试听记录数"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="completionRate" xxx min-width="160">
          <template #header>
            试听完成率
            <el-tooltip
              class="box-item"
              effect="dark"
              content="试听完成数/预约试听数*100%"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="applicationNum" xxx min-width="140">
          <template #header>
            试听报名数
            <el-tooltip
              class="box-item"
              effect="dark"
              content="试听时间在所选时间范围内，是否报名为“是”，试听状态为“已体验”的试听记录数"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="conversionRate" xxx min-width="160">
          <template #header>
            试听转化率
            <el-tooltip
              class="box-item"
              effect="dark"
              content="试听报名数/试听完成数*100%，如果大于100%，检查一下是否有试听课未点名哦"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="registraNum" xxx min-width="120">
          <template #header>
            报课人次
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选日期内，购买课程的学员人次。同一学员购买多课程记多次"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="paidAmount" xxx min-width="160">
          <template #header>
            报课实收金额
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选日期内，学员购买课程的实付金额之和"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="tableParams.pageNum"
        v-model:limit="tableParams.pageSize"
        @pagination="getList"
        size="small"
      />
    </div>
  </el-card>
</template>

<script setup>
import * as echarts from "echarts";
import CoreData from "../components/coreData.vue";

import {
  getPerformanceList,
  getJoinWayList,
  getFollowPeopleList,
} from "@/api/studentManagement/index.js";
import { getPeopleList } from "@/api/studentManagement/index";
import {
  dataTrendsAPI,
  dataTrendsEChartAPI,
  countAcademicDataAPI,
  exportDataTrendAPI,
} from "@/api/dataCenter/enrollData";

const { proxy } = getCurrentInstance();
const loading = ref(false);
const tableLoading = ref(false);
const typeList = [
  { name: "按天", type: 1 },
  //{ name: "按周", type: 3 },
  { name: "按月", type: 2 },
  //{ name: "按季度", type: 4 },
];

const conditionList = [
  { name: "销售人员", value: "saler" },
  // { name: "招生渠道", value: "joinway" },
  { name: "学员创建人", value: "creator" },
];

const followPeopleList = ref([]); // 销售人员/业绩归属人
const joinWayList = ref([]); // 招生渠道
const creatorList = ref([]); // 学员创建人
const teacherList = ref([]);

const chartContainer = ref(null);
const tab = ref(2);
const list = ref([]);
const total = ref(0);

const data = reactive({
  queryParams: {
    condition: null,
    type: 1,
    range: [
      formatDate(new Date(new Date().getTime() - 6 * 24 * 60 * 60 * 1000)),
      formatDate(new Date()),
    ],
    saler: null,
    joinway: null,
    creator: null,
    startDate: formatDate(
      new Date(new Date().getTime() - 6 * 24 * 60 * 60 * 1000)
    ),
    endDate: formatDate(new Date()),
  },
  tableParams: {
    code: 2,
    pageNum: 1,
    pageSize: 10,
    joinway: null, // 招生渠道
    isTeacher: 0,
    creator: null,
    teacher: null,
    saler: null,
  },
});

const { queryParams, tableParams } = toRefs(data);

const coreData = ref({}); // 核心数据
const echartsData = ref([]); // 图表数据，格式如下： [["2020-1", 2.0],["2020-2", 4.9], ["2020-3", 7.0], ]
const allEchartsData = ref({});

const radio1 = ref("newNumList");
let radioMap = ref({
  totalNumList: "累计线索数",
  newNumList: "新增线索数",
  bookNumList: "预约试听数",
  finishNumList: "试听完成数",
  completionRateList: "试听完成率",
  applicationNumList: "试听报名数",
  conversionRateList: "试听转化率",
  registraNumList: "报课人次",
  paidAmountNumList: "报课实收金额",
});

// 计算-------------------------------------------------------------------------------------------------
function formatDate(date) {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  return `${year}-${month}-${day}`;
}

function formatMonth(date) {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  return `${year}-${month}`;
}

function disabledDate(time) {
  return time > Date.now();
}

// 事件-----------------------------------------------------------------------------------------------
function handleChangeType(value) {
  if (value === 1) {
    queryParams.value.range = [formatDate(new Date()), formatDate(new Date())];
    handleChangeDate(queryParams.value.range);
  } else {
    queryParams.value.range = [
      formatMonth(new Date()),
      formatMonth(new Date()),
    ];
    handleChangeDate(queryParams.value.range);
  }
}

function handleChangeCondition(value) {
  queryParams.value.saler = null;
  queryParams.value.joinway = null;
  queryParams.value.creator = null;
  if (!value) handleQuery();
}

function handleChangeDate(arr) {
  queryParams.value.startDate = arr[0];
  queryParams.value.endDate = arr[1];
  handleQuery();
}
function handleChangeMonth(arr) {
  queryParams.value.startDate = arr[0];
  queryParams.value.endDate = arr[1];
  handleQuery();
}

function handleChange(value) {
  if (value) handleQuery();
}

function queryInitList() {
  tableParams.pageNum = 1;
  getList();
}

function handleChangeTab(value) {
  tableParams.value = {
    code: value,
    pageNum: 1,
    pageSize: 10,
    joinway: null, // 招生渠道
    isTeacher: 0,
    creator: null,
    teacher: null,
    saler: null,
  };

  getList();
}

function initEcharts() {
  const chartInstance = echarts.init(chartContainer.value);
  const option = {
    grid: {
      x: 40,
      x2: 50,
    },
    tooltip: {
      trigger: "axis",
    },
    toolbox: {
      show: true,
      feature: {
        magicType: { show: true, type: ["line", "bar"] },
      },
    },
    calculable: true,
    xAxis: [
      {
        type: "category",
        //boundaryGap: false,
        // prettier-ignore
        //data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      },
    ],

    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: radioMap.value[radio1.value],
        type: "bar",
        // data: [
        //   2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
        // ],
        data: echartsData.value,
        markPoint: {
          data: [
            { type: "max", name: "最高" },
            { type: "min", name: "最低" },
          ],
          symbolSize: 1,
          symbolOffset: [0, -10],
          label: {
            formatter: "{b}: {c}",
            color: "black",
          },
        },
        markLine: {
          data: [{ type: "average", name: "平均值" }],
        },
      },
    ],
    dataZoom: [
      {
        show: true,
        //start: 0,
        //end: 100,
        startValue: 0,
        endValue: 11, // 显示12个月
        height: 10,
      },
      {
        type: "inside",
        //start: 94,
        //end: 100,
      },
    ],
  };
  chartInstance.setOption(option);
  window.addEventListener("resize", () => {
    chartInstance.resize();
  });
}

function handleRadioChange(val) {
  echartsData.value = allEchartsData.value[val];
  initEcharts();
}

// 方法------------------------------------------------------------------------------------------

// 销售人员/业绩归属人
function getSalerList() {
  loading.value = true;
  getPerformanceList({ pageSize: 9999, pageNum: 1 }).then((response) => {
    followPeopleList.value = response.rows;
    loading.value = false;
  });
}

// 招生渠道
function getJoinWayDataList() {
  loading.value = true;
  getJoinWayList({ pageSize: 9999, pageNum: 1 }).then((response) => {
    joinWayList.value = response.data;
    loading.value = false;
  });
}

//学员创建人
function getCreatorList() {
  loading.value = true;
  getFollowPeopleList({ pageSize: 9999, pageNum: 1 }).then((response) => {
    creatorList.value = response.rows;
    loading.value = false;
  });
}

// 获取教师列表
function getTeacherList() {
  loading.value = true;
  getPeopleList({ isTeach: 1 }).then((response) => {
    teacherList.value = response.data;
    loading.value = false;
  });
}

function getList() {
  dataTrends();
}

// 数据趋势
function dataTrends() {
  loading.value = true;
  const param = Object.assign({}, tableParams.value, queryParams.value, {
    saler: tableParams.value.saler || queryParams.value.saler,
    creator: tableParams.value.creator || queryParams.value.creator,
    joinway: tableParams.value.joinway || queryParams.value.joinway,
  });
  dataTrendsAPI(param).then((response) => {
    list.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

// 导出
function handleExport(type, fileName) {
  let param;
  if (type === 1) {
    param = Object.assign({ code: type }, queryParams.value);
  } else {
    param = Object.assign(
      { code: type },
      tableParams.value,
      queryParams.value,
      {
        saler: tableParams.value.saler || queryParams.value.saler,
        creator: tableParams.value.creator || queryParams.value.creator,
        joinway: tableParams.value.joinway || queryParams.value.joinway,
      }
    );
  }
  param.pageNum = 1;
  param.pageSize = 9999;
  exportDataTrendAPI(param).then((res) => {
    let blob = new Blob([res], {
      type: "application/vnd.ms-excel;charset=utf-8",
    });
    const url = window.URL.createObjectURL(blob),
      link = document.createElement("a");
    link.href = url;
    link.download = fileName + new Date().getTime();
    link.click();
    URL.revokeObjectURL(url); // 释放内存
    proxy.$modal.msgSuccess("导出成功");
  });
}

function initPicker() {
  getSalerList();
  getJoinWayDataList();
  getCreatorList();
  getTeacherList();
}

// 查询方法
function handleQuery() {
  countAcademicData();
  getEchartsData();
  getList();
}

// 核心数据
function countAcademicData() {
  loading.value = true;
  countAcademicDataAPI(queryParams.value).then((response) => {
    coreData.value = response.data;
    loading.value = false;
  });
}

// echarts数据
function getEchartsData() {
  loading.value = true;
  dataTrendsEChartAPI(queryParams.value).then((response) => {
    loading.value = false;
    allEchartsData.value = response.data;
    echartsData.value = allEchartsData.value[radio1.value];
    initEcharts();
  });
}

initPicker();

handleQuery();
</script>

<style lang="scss" scoped>
.el-form-item--default {
  margin-bottom: 0 !important;
}
.block-group {
  display: flex;
  overflow-x: auto;
}
.el-card {
  margin-bottom: 10px !important;
}
.export-box {
  display: flex;
  flex-direction: row-reverse;
  margin: 10px 0;
}
.query-box {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  margin: 10px 0;
}
</style>
